// @ts-nocheck
import React, {useState,useEffect} from 'react';
import {Modal, Form, Input, message, Descriptions, Row, Col, Card, Divider} from 'antd'
import {transfer} from '@/services/contract'
import {formatDate}  from '@/tools/tool'
import DistrictSelect from "@/components/Select/DistrictSelect";
import SubDistrictSelect from "@/components/Select/SubDistrictSelect";
import CommunitySelect from "@/components/Select/CommunitySelect";
import AddressSelect from "@/components/Select/AddressSelect";
const {TextArea} = Input;
const Transfer = (props) => {
  const {visible, onOk, onClose, data} = props
  const [district, setDistrict] = useState(null)
  const [subDistrict, setSubDistrict] = useState(null)
  const [community, setCommunity] = useState(null)
  const [address, setAddress] = useState(null)
  const [back, setBack] = useState(true)
  const [form] = Form.useForm()
  useEffect(()=>{
    if (visible) {
      setDistrict(data.district)
      setSubDistrict(data.subdistrict)
      setAddress(data.address)
      setCommunity(data.community)
      form.setFieldsValue({
        district: data.district,
        subdistrict: data.subdistrict,
        community: data.community,
        address: data.address,
        detail_address: data.detail_address,
        memo:data.memo
      })
    }

  },[visible])
  const onCommunitySelect = (e) => {
    const {district_id, subdistrict_id} = e
    setBack(true)
    setSubDistrict(subdistrict_id)
    setDistrict(district_id)
    form.setFieldsValue({district: district_id, subdistrict: subdistrict_id})
  }
  const onAddressSelect = (e) => {
    const {district_id, subdistrict_id, community_id} = e
    setBack(true)
    setCommunity(community_id)
    setSubDistrict(subdistrict_id)
    setDistrict(district_id)
    form.setFieldsValue({district: district_id, subdistrict: subdistrict_id, community: community_id})
  }
  const handleOk = () => {
    form.validateFields().then(value => {
      const body = {
        contract_id: data.contract_id,
        district: value.district,
        subdistrict: value.subdistrict,
        community: value.community,
        address: value.address,
        detail_address:  value.detail_address,
        memo: value.memo
      }
      transfer(body).then(res => {
        if (res.status === 200) {
          message.success(res.message).then()
          onOk()
          form.resetFields()
        } else {
          message.error('地址迁移失败！').then()
        }
      })
    })
  }
  return (
    <Modal
      destroyOnClose
      title={'地址迁移'}
      visible={visible}
      width={'75vw'}
      maskClosable={false}
      onOk={() => handleOk()}
      onCancel={() => {
        onClose();
        form.resetFields()
      }}
    >
      <Descriptions layout="vertical" bordered column={5} size={'small'}>
        <Descriptions.Item label="联系人">{data.linkman}</Descriptions.Item>
        <Descriptions.Item label="宽带账号">{data.account_number}</Descriptions.Item>
        <Descriptions.Item label="宽带密码">{data.account_password}</Descriptions.Item>
        <Descriptions.Item label="电话">{data.link_telephone}</Descriptions.Item>
        <Descriptions.Item label="套餐">{data.package_name}</Descriptions.Item>
        <Descriptions.Item label="通信地址">{data.detail_address}</Descriptions.Item>
        <Descriptions.Item label="开始时间">{formatDate(data.start_date)}</Descriptions.Item>
        <Descriptions.Item label="结束时间">{formatDate(data.end_date)}</Descriptions.Item>
        <Descriptions.Item label="备注">{data.memo}</Descriptions.Item>
        <Descriptions.Item label="受理人">{data.operator}</Descriptions.Item>
      </Descriptions>
      <Divider>修改地址信息</Divider>
      <Card size={'small'}>
        <Form form={form} autoComplete="off" labelCol={{span: 6}} wrapperCol={{span: 14}}>
          <Row>
            <Col span={12}>
              <Form.Item label="所属区域" name="district" rules={[{required: true, message: '请选择所属区域'}]}>
                <DistrictSelect onChange={(e) => {
                  setBack(false);
                  setDistrict(e)
                }} defaultValue={district}/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="所属街道" name="subdistrict" rules={[{required: true, message: '请选择所属街道'}]}>
                <SubDistrictSelect onChange={(e) => {
                  setBack(false);
                  setSubDistrict(e)
                }} district={district} defaultValue={subDistrict} back={back}/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="所属园区" name="community" rules={[{required: true, message: '请选择所属园区'}]}>
                <CommunitySelect onSelect={(e) => onCommunitySelect(e)} onChange={(e) => {
                  setCommunity(e)
                }}
                                 subDistrict={subDistrict} district={district} defaultValue={community} back={back}/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="蓝牌地址" name="address" rules={[{required: true, message: '请选择蓝牌地址'}]}>
                <AddressSelect onSelect={(e) => onAddressSelect(e)} onChange={(e) => setAddress(e)}
                               community={community}
                               district={district}
                               subDistrict={subDistrict} back={back}
                               defaultValue={address}/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="详细地址" name="detail_address" rules={[{required: true, message: '请输入详细地址'}]}>
                <TextArea autoSize allowClear placeholder={'请输入详细地址'}/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="备注" name={'memo'}>
                <TextArea autoSize/>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>

    </Modal>
  );
};

export default Transfer;
